<template>
  <basic-dialog
    :visible.sync="visible"
    :title="'编辑计量单位'"
    :width="'50%'"
    :handleClose="handleCloseDialog"
    :handleOpened="handleOpenDialog"
    :handleOk="handleSubmit"
    :loadingBtn="submitLoading"
    :okText="'提交'"
  >
    <el-row>
      <el-form class="table_form_wrap" ref="formData" :rules="rules" :model="formData" label-width="120px">
        <el-form-item label="计量单位名称：" prop="unitName">
          <el-input
            disabled
            v-model="formData.unitName"
            placeholder="请输入计量单位名称"
            :maxlength="20"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="计量单位组：" prop="unitGroupId">
          <el-select
            v-model="formData.unitGroupId"
            filterable
          >
            <el-option
              v-for="item in unitGroupList"
              :key="item.uuid"
              :label="item.groupName"
              :value="item.uuid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="默认小数位：" prop="decimalPlaces">
          <el-input-number
            v-model="formData.decimalPlaces"
            placeholder="请输入默认小数位"
            :min="0"
            :max="3"
            :precision="0"
          />
        </el-form-item>
        <el-form-item label="备注：" prop="note">
          <el-input
            type="textarea"
            v-model="formData.note"
            placeholder="请输入备注"
            :maxlength="100"
            show-word-limit
          />
        </el-form-item>
      </el-form>
    </el-row>
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import {
  getUnitGroupListService,
  getUnitDetailsService,
  editUnitService,
  getUnitDetailsForNoPassService,
  editUnitForNoPassService,
} from '@/api/basics/unitManage/unitList';

export default {
  name: 'AddUnit',
  components: {
    BasicDialog,
  },
  props: {
    visible: {
      type: Boolean
    },
    // 0 计量单位编辑 1 计量单位重新编辑
    pageType: {
      type: [String, Number],
      required: true
    },
    uuid: {
      type: [String, Number],
      required: true
    }
  },
  data () {
    return {
      submitLoading: false,
      loading: false,
      unitGroupList: [], // 计量单位组选项
      formData: {
        uuid: '', // 计量单位Uuid
        unitName: '', // 单位名称
        unitNo: '', // 单位编码
        decimalPlaces: null, // 小数位数
        note: '' // 备注
      },
      rules: {
        unitName: [
          { required: true, message: '请输入计量单位名称', trigger: 'blur' },
        ],
        unitGroupId: [
          { required: true, message: '请选择计量单位组', trigger: 'change' },
        ],
        decimalPlaces: [
          { required: true, message: '请输入默认小数位', trigger: 'blur' },
        ],
      }
    };
  },
  methods: {
    handleOpenDialog () {
      this.getUnitGroupList()
    },
    // 关闭弹框
    handleCloseDialog () {
      this.$emit('update:visible', false);
    },
    async getUnitGroupList (groupName) {
      const res = await getUnitGroupListService(
        { groupName },
        state => { this.loading = state; }
      );
      if (res) {
        this.unitGroupList = res.retData;
        if (this.pageType == 0) {
          this.getUnitDetailsForEdit(this.uuid)
        }
        if (this.pageType == 1) {
          this.getUnitDetailsForNoPass(this.uuid)
        }
      }
    },
    initFormData (data) {
      const {
        uuid,
        unitName,
        unitNo,
        unitGroupId,
        unitGroupName,
        decimalPlaces,
        note
      } = data;
      this.formData = {
        uuid,
        unitName,
        unitNo,
        unitGroupId,
        unitGroupName,
        decimalPlaces,
        note
      }
    },
    // 获取计量单位详情
    async getUnitDetailsForEdit (uuid) {
      const res = await getUnitDetailsService({ uuid })
      if (res) {
        this.initFormData(res.retData)
      }
    },
    // 编辑计量单位
    async editUnit () {
      const res = await editUnitService(this.formData, state => { this.submitLoading = state })
      if (res) {
        this.$message.success('操作成功')
        this.handleCloseDialog();
        this.$emit('getTableData')
      }
    },
    // 获取审核驳回计量单位详情
    async getUnitDetailsForNoPass (uuid) {
      const res = await getUnitDetailsForNoPassService({ uuid })
      if (res) {
        this.initFormData(res.retData)
      }
    },
    // 编辑审核驳回计量单位
    async editUnitForNoPass () {
      const res = await editUnitForNoPassService(this.formData, state => { this.submitLoading = state })
      if (res) {
        this.$message.success('操作成功');
        this.handleCloseDialog();
        this.$emit('getTableData')
      }
    },
    handleSubmit () {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          if (this.pageType == 0) {
            this.editUnit()
          }
          if (this.pageType == 1) {
            this.editUnitForNoPass()
          }
        }
      })
    },
  }
};
</script>
